<template>
    <div class="categories">
        <Crumbs :bread='bread'></Crumbs>
        <el-card>
            <el-button type="primary" @click="dialogVisible=true">添加分类</el-button>
            <!-- 修改 -->
            <el-dialog title="添加分类" :visible.sync="dialogVisible1" width="60%" :before-close="handleClose">
                <el-form ref="form" :model="form1" label-width="180px">
                    <el-form-item label="分类名称" prop="cat_name" :rules='[{required:true,message:"请输入分类名称",trigger:"blur"}]'>
                        <el-input v-model="form1.cat_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
          </span>
                <!--添加 -->
            </el-dialog>
            <el-dialog title="添加分类" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
                <el-form ref="form" :model="form" label-width="180px">
                    <el-form-item label="分类名称" prop="cat_name" :rules='[{required:true,message:"请输入分类名称",trigger:"blur"}]'>
                        <el-input v-model="form.cat_name"></el-input>
                    </el-form-item>
                    <el-form-item label="父级分类" :label-width="formLabelWidth">
                        <el-cascader style="width:100%" v-model="form.cat_pid" :options="tableData" :props="{ checkStrictly: true,label:'cat_name',value:'cat_id' }" clearable></el-cascader>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
            </el-dialog>
            <el-table :data="tableData" border style="width: 100%" row-key="cat_id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column label="#" type='index'>
                </el-table-column>
                <el-table-column prop="cat_name" label="分类名称">
                </el-table-column>
                <el-table-column label="是否有效">
                    <div class="yuan">
                        <el-button type="success" icon="el-icon-check" circle size="mini"></el-button>
                    </div>
                </el-table-column>
                <el-table-column prop="cat_level" label="排序">
                    <template slot-scope="scope">
                  <el-button type="primary" v-if="scope.row.cat_level==0" size="mini">一级</el-button>
                  <el-button type="success" v-if="scope.row.cat_level==1" size="mini">二级</el-button>
                  <el-button type="warning" v-if="scope.row.cat_level==2" size="mini">三级</el-button>
</template>
    </el-table-column>
      <el-table-column label="操作">
<template slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="deit(scope.row.cat_id)">
    </el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.cat_id)"></el-button>
</template>
    </el-table-column>
  </el-table>
  <Pages :total='total' :pagesize='page.pagesize' :pagenum='page.pagenum' @handpagesize='handpagesize' @handpagenum='handpagenum'></Pages>
        </el-card>
    </div>
</template>
<script>
    import Crumbs from '@/components/crumbs.vue'
    import Pages from '@/components/paging.vue'
    import {
        catelist,
        addcate,
        huicate,
        editcate,
        delcate
    } from '../until/categories.js'
    export default {
        components: {
            Crumbs,
            Pages
        },
        data() {
            return {
                tableData: [],
                formLabelWidth: "180px",
                dialogVisible1: false,
                dialogVisible: false,
                options: [],
                form: {
                    cat_name: "",
                    cat_pid: "",
                    cat_level: ""
                },
                page: {
                    type: "",
                    pagenum: 1,
                    pagesize: 5
                },
                form1: {
                    cat_name: ""
                },
                id: null,
                total: null,
                bread: [{
                        id: 1,
                        path: "",
                        title: "商品列表"
                    },
                    {
                        id: 2,
                        path: "",
                        title: "商品分类"
                    },
                ]
            };
        },
        mounted() {
            this.setlist()
        },
        methods: {
            //列表获取
            async setlist() {
                const {
                    data: res
                } = await catelist(this.page)
                this.tableData = res.data.result
                this.total = res.data.total
            },
            //分页
            handpagesize(val) {
                console.log(`每页 ${val} 条`);
                this.page.pagesize = val;
                this.setlist();
            },
            // 添加分类
            async add() {
                let cat_name = this.form.cat_name;
                let cat_pid = this.form.cat_pid;
                let cat_level = this.form.cat_level;
                if (!cat_pid) {
                    cat_pid = 0
                    cat_level = 0
                } else {
                    cat_level = cat_pid.length;
                    cat_pid = cat_pid[cat_pid.length - 1]
                }
                console.log(cat_pid);
                console.log(cat_level);
                const {
                    data: res
                } = await addcate({
                    cat_name,
                    cat_pid,
                    cat_level
                })
                if (res.meta.status == 201) {
                    this.dialogVisible = false;
                    this.$message.success("添加商品分类成功")
                    this.setlist()
                }
                this.form.cat_name = '';
                this.form.cat_pid = '';
            },
            // 关闭弹框
            handleClose() {
                this.dialogVisible = false;
                this.dialogVisible1 = false;
            },
            handpagenum(val) {
                this.page.pagenum = val;
                this.setlist();
            },
            // 回填数据
            async deit(id) {
                this.dialogVisible1 = true;
                const {
                    data: res
                } = await huicate(id);
                console.log(res)
                this.form1.cat_name = res.data.cat_name
                this.id = res.data.cat_id
            },
            // 修改分类
            async edit() {
                const {
                    data: res
                } = await editcate(this.id, this.form1)
                console.log(res)
                if (res.meta.status == 200) {
                    this.dialogVisible1 = false;
                    this.setlist()
                    this.$message.success(res.meta.msg)
                }
            },
            //删除
            del(id) {
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(async() => {
                        var res = await delcate(id);
                        console.log(res);
                        this.setlist();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
        },
        watch:{
            tableData:{
                handler(n){
                    if(this.page.pagenum>1&&n.length==0){
                        this.page.pagenum-=1;
                        this.setlist()
                    }
                }
            }
        }
    };
</script>

<style scoped>

</style>